<?php
require __DIR__ . '/init.php';
require_once 'ban_system.php';
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
// 检查当前用户是否被封禁
$currentUser = $_SESSION['username'] ?? null;
if ($currentUser) {
    $banInfo = checkUserBan($currentUser);
    if ($banInfo) {
        // 清除用户会话
        session_unset();
        session_destroy();
        
        // 显示封禁信息并退出
        displayBanPage($banInfo);
        exit;
    }
}
if (!isset($_SESSION['username'])) {
    header('Location: welcome.php');
    exit();
}
require_once 'track_online.php';
// 新增：检测新好友请求
function getNewFriendRequests($username) {
    $messagesFile = __DIR__ . '/messages/system_messages.json';
    if (!file_exists($messagesFile)) return 0;
    
    $messages = json_decode(file_get_contents($messagesFile), true) ?? [];
    $count = 0;
    
    foreach ($messages as $msg) {
        // 只统计未处理的新请求
        if ($msg['type'] === 'friend_request' && 
            $msg['to_user'] === $username && 
            ($msg['status'] ?? 'pending') === 'pending') {
            $count++;
        }
    }
    
    return $count;
}

// 当前用户
$currentUser = $_SESSION['username'];

// 获取新好友请求数量
$newFriendRequests = getNewFriendRequests($currentUser);
// 定义 ensureFile 函数，用于检查并初始化文件
function ensureFile($filename, $defaultContent = '[]') {
    if (!file_exists($filename)) {
        file_put_contents($filename, $defaultContent);
    }
    $content = file_get_contents($filename);
    $data = json_decode($content, true);
    return is_array($data) ? $data : json_decode($defaultContent, true);
}

// 当前用户
$currentUser = $_SESSION['username'];

// 检查并初始化用户的聊天列表
$chatListFile = __DIR__ . "/user/$currentUser/chats.json";
$chats = ensureFile($chatListFile);

// 确保公共聊天存在
$publicChat = [
    'id' => 'public',
    'name' => '公共聊天',
    'type' => 'public'
];
$foundPublicChat = false;

foreach ($chats as $chat) {
    if ($chat['id'] === 'public') {
        $foundPublicChat = true;
        break;
    }
}

if (!$foundPublicChat) {
    $chats[] = $publicChat;
    file_put_contents($chatListFile, json_encode($chats));
}

// 获取用户头像路径（仅针对私人聊天）
function getUserAvatar($username) {
    $userInfoFile = __DIR__ . "/user/$username/info.json";
    if (file_exists($userInfoFile)) {
        $userInfo = json_decode(file_get_contents($userInfoFile), true);
        return $userInfo['avatar'] ?? null;
    }
    return null;
}

// 检查用户是否在线
function isUserOnline($username) {
    $online_file = 'online_users.dat';
    if (!file_exists($online_file)) return false;
    
    $online_users = unserialize(file_get_contents($online_file));
    if (!is_array($online_users)) return false;
    
    return isset($online_users[$username]);
}
  require_once 'userinit.php'; 
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>主页 - JIILCHAT</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="JIILchat,全新的即时聊天系统">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            background: linear-gradient(135deg, #141e30, #243b55);
            color: #f0f0f0;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* 顶栏样式 */
        .chat-app-header {
            background: linear-gradient(90deg, #1a2a6c, #2a5298);
            color: white;
            padding: 12px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            height: 70px;
        }
        
        .header-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .chat-app-header h1 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        .chat-app-header h2 {
            margin: 2px 0 0;
            font-size: 13px;
            font-weight: 400;
            color: #a0c6ff;
            opacity: 0.9;
        }
        
        .announcement-btn {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .announcement-btn i {
            font-size: 16px;
        }
        
        .announcement-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }
        
        /* 聊天列表样式 */
        .chat-list {
            margin-top: 70px;
            padding: 15px 10px 80px;
        }
        
        .chat-card {
            display: flex;
            align-items: center;
            padding: 18px 15px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 15px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .chat-card:hover {
            background: rgba(255, 255, 255, 0.12);
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }
        
        .chat-card:active {
            transform: translateY(0);
        }
        
        .chat-avatar {
            width: 55px;
            height: 55px;
            margin-right: 15px;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #3498db, #2c3e50);
            flex-shrink: 0;
            position: relative;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }
        
        .chat-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .chat-info {
            flex-grow: 1;
            min-width: 0;
        }
        
        .chat-card h3 {
    margin: 0 0 10px 0; /* 添加底部边距 */
    font-size: 17px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}
        
        .chat-type {
            font-size: 12px;
            background: rgba(52, 152, 219, 0.3);
            border-radius: 4px;
            padding: 2px 6px;
            font-weight: 500;
        }
        
        /* 在线状态指示器 */
        .online-indicator {
            display: flex;
            align-items: center;
            font-size: 13px;
            margin-top: 5px;
            color: #a0c6ff;
        }
        
        .online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}
        .online {
    background-color: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
}

.offline {
    background-color: #95a5a6;
}
        
        /* 底部导航栏 */
        footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            background: rgba(10, 25, 47, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 100;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: #a0c6ff;
            font-size: 14px;
            cursor: pointer;
            padding: 12px 20px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
            opacity: 0.7;
        }
        
        .nav-btn.active {
            color: #3498db;
            opacity: 1;
            transform: translateY(-5px);
        }
        
        .nav-btn i {
            font-size: 22px;
            transition: all 0.3s ease;
        }
        
        .nav-btn.active i {
            color: #3498db;
            text-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
        }
        
        .nav-btn:hover {
            opacity: 1;
            background: rgba(52, 152, 219, 0.1);
        }
        
        /* 菜单页面样式 */
        .menu-page {
            display: none;
            margin-top: 70px;
            padding: 25px 15px 90px;
            min-height: calc(100vh - 70px);
        }
        
        .menu-page.active {
            display: block;
            animation: fadeIn 0.4s ease;
        }
        
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .menu-option {
            background: linear-gradient(135deg, rgba(41, 128, 185, 0.25), rgba(44, 62, 80, 0.25));
            color: white;
            border-radius: 18px;
            padding: 25px 15px;
            cursor: pointer;
            text-align: center;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
            position: relative;
            z-index: 1;
        }
        
        .menu-option::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .menu-option:hover {
            transform: translateY(-8px) scale(1.03);
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
        }
        
        .menu-option:hover::before {
            opacity: 1;
        }
        
        .menu-option:active {
            transform: translateY(-2px);
        }
        
        .menu-option i {
            font-size: 36px;
            margin-bottom: 15px;
            display: block;
            color: #3498db;
            text-shadow: 0 0 10px rgba(52, 152, 219, 0.4);
        }
        
        .menu-option span {
            font-size: 16px;
            font-weight: 600;
            display: block;
        }
        
        /* 公告弹窗 */
        .announcement-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            z-index: 1000;
            backdrop-filter: blur(8px);
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .announcement-modal {
            position: relative;
            width: 90%;
            max-width: 600px;
            background: rgba(20, 30, 48, 0.95);
            border-radius: 20px;
            padding: 25px;
            max-height: 85vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transform: scale(0.95);
            transition: transform 0.4s ease;
        }
        
        .close-announcement {
            position: absolute;
            top: 15px;
            right: 20px;
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            transition: color 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .close-announcement:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
        }
        
        .announcement-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px 10px;
            margin-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            color: #e0e0e0;
            line-height: 1.7;
            font-size: 16px;
        }
        
        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .chat-app-header {
                height: 60px;
                padding: 10px 15px;
            }
            
            .chat-app-header h1 {
                font-size: 16px;
            }
            
            .chat-app-header h2 {
                font-size: 11px;
            }
            
            .announcement-btn {
                padding: 6px 12px;
                font-size: 13px;
            }
            
            .chat-list {
                margin-top: 60px;
                padding: 10px 8px 70px;
            }
            
            .chat-card {
                padding: 15px;
            }
            
            .chat-avatar {
                width: 48px;
                height: 48px;
            }
            
            .chat-card h3 {
        margin-bottom: 8px;
        font-size: 15px;
    }
            
            .menu-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .menu-option {
                padding: 20px;
            }
            
            .nav-btn {
                padding: 10px 15px;
                font-size: 12px;
            }
            
            .nav-btn i {
                font-size: 20px;
            }
        }
        
        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        /* 新增样式 */
.header-right {
    display: flex;
    gap: 10px;
}

.friend-request-btn, 
.announcement-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.friend-request-btn:hover, 
.announcement-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e74c极简;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

.friend-request-btn.has-requests {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* 响应式调整 */
@media (max-width: 480px) {
    .friend-request-btn, 
    .announcement-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .notification-badge {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
}
/* 替换原有的通知徽章样式 */
.notification-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.8);
    animation: pulse 1.5s infinite;
}

/* 移除原有的数字徽章样式 */
.notification-badge {
    display: none;
}

/* 确保呼吸动画存在 */
@keyframes pulse {
    0% { transform: scale(0.9); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(0.9); opacity: 1; }
}

/* 响应式调整 */
@media (max-width: 480px) {
    .notification-dot {
        top: 3px;
        right: 3px;
        width: 10px;
        height: 10px;
    }
}
/* 添加在最末尾 */
.status-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(10, 25, 47, 0.95);
    color: #fff;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    border-left: 4px solid #3498db;
    transform: translateX(150%);
    transition: transform 0.4s ease, opacity 0.4s ease;
    z-index: 200;
    max-width: 300px;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
}

.status-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.online {
    background-color: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
}

.status-dot.offline {
    background-color: #95a5a6;
}
/* 用户按钮样式 */
.user-profile-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
}

.user-profile-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* 调整按钮间距 */
.header-right {
    display: flex;
    gap: 10px;
    align-items: center;
}
    </style>
</head>
<!-- 添加在 </body> 标签之前 -->
<div id="statusNotification" class="status-notification">
    <span class="status-dot" id="statusNotificationDot"></span>
    <div>
        <strong id="statusFriendName"></strong>
        <p id="statusMessage"></p>
    </div>
</div>
<body>
    <!-- 顶栏 -->
    <!-- 修改顶栏区域 -->
<header class="chat-app-header">
    <div class="header-left">
        <h1>JIIL微聊</h1>
        <h2>JIILCHAT</h2>
    </div>
    <div class="header-right">
        <!-- 新增好友请求按钮 -->
        <!-- 在顶栏部分修改好友请求按钮 -->
<button class="header-btn friend-request-btn <?= $newFriendRequests > 0 ? 'has-requests' : '' ?>" 
        onclick="location.href='system_messages.php'">
    <i class="fas fa-user-plus"></i>
    <?php if ($newFriendRequests > 0): ?>
        <!-- 修改为纯红点不带数字 -->
        <span class="notification-dot"></span>
    <?php endif; ?>
</button>
        
        <!-- 原有公告按钮 -->
        <button class="announcement-btn" onclick="showAnnouncement()">
            <i class="fas fa-bullhorn"></i> 公告
        </button>
        <button class="header-btn user-profile-btn" onclick="location.href='profile.php'">
            <i class="fas fa-user"></i>
        </button>
    </div>
</header>

    <!-- 公告弹窗 -->
    <div id="announcement-overlay" class="announcement-overlay" onclick="closeAnnouncement()">
        <div class="announcement-modal" onclick="event.stopPropagation()">
            <button class="close-announcement" onclick="closeAnnouncement()">&times;</button>
            <h2 style="text-align: center; margin-top: 10px; color: #3498db;">系统公告</h2>
            <div id="announcement-content" class="announcement-content"></div>
        </div>
    </div>
    

    <!-- 菜单页面 -->
    <div class="menu-page">
        <div class="menu-grid">
            <div class="menu-option" onclick="location.href='add_user.php'">
                <i class="fas fa-user-plus"></i>
                <span>加好友</span>
            </div>
            <div class="menu-option" onclick="location.href='seauser.php'">
                <i class="fas fa-search"></i>
                <span>搜索人</span>
            </div>
            <div class="menu-option" onclick="location.href='qrscan.php'">
                <i class="fas fa-qrcode"></i>
                <span>扫描二维码</span>
            </div>
            <div class="menu-option" onclick="location.href='upload.php'">
                <i class="fas fa-file-upload"></i>
                <span>文件上传</span>
            </div>
            <div class="menu-option" onclick="location.href='qlcreat.php'">
                <i class="fas fa-users"></i>
                <span>群聊</span>
            </div>
            <div class="menu-option" onclick="location.href='kf.php'">
                <i class="fas fa-robot"></i>
                <span>机器人平台</span>
            </div>
            <div class="menu-option" onclick="location.href='online.php'">
                <i class="fas fa-user-clock"></i>
                <span>在线用户</span>
            </div>
             <div class="menu-option" onclick="location.href='/mp4'">
            <i class="fas fa-video"></i>
            <span>短视频</span>
        </div>
            <div class="menu-option" onclick="location.href='dt.php'">
                <i class="fas fa-rss"></i>
                <span>动态</span>
            </div>
        </div>
    </div>

<div class="chat-list">
    <?php foreach ($chats as $chat): ?>
        <div class="chat-card" 
             onclick="location.href='<?= $chat['type'] === 'public' ? 'public.php' : ($chat['type'] === 'group' ? 'group_chat.php?id=' . urlencode($chat['id']) : 'chat.php?id=' . urlencode($chat['id']) . '&type=' . urlencode($chat['type'])) ?>'">
            <div class="chat-avatar">
                <?php if ($chat['type'] === 'group'): ?>
                    <img src="<?= htmlspecialchars($chat['avatar'] ?? 'default-group-avatar.png') ?>" alt="群聊头像">
                <?php elseif ($chat['type'] !== 'public'): ?>
                    <?php $avatar = getUserAvatar($chat['id']); ?>
                    <img src="<?= htmlspecialchars($avatar ?? 'default-avatar.png') ?>" alt="用户头像">
                <?php else: ?>
                    <i class="fas fa-globe public-icon"></i>
                <?php endif; ?>
            </div>
            <div class="chat-info">
                <h3><?= htmlspecialchars($chat['name']) ?></h3>
                
                <!-- 新增：元数据容器 -->
                <div class="chat-meta">
                    <?php if ($chat['type'] === 'group'): ?>
                        <span class="chat-type">群聊</span>
                    <?php endif; ?>
                    
                    <?php if ($chat['type'] !== 'public' && $chat['type'] !== 'group'): ?>
                        <div class="online-indicator">
                            <span class="online-dot <?= isUserOnline($chat['id']) ? 'online' : 'offline' ?>"></span>
                            <?= isUserOnline($chat['id']) ? '在线' : '离线' ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>
    <!-- 底部导航 -->
    <footer>
        <button class="nav-btn active" onclick="togglePage('home')">
            <i class="fas fa-home"></i>
            <span>主页</span>
        </button>
        <button class="nav-btn" onclick="togglePage('menu')">
            <i class="fas fa-bars"></i>
            <span>菜单</span>
        </button>
    </footer>

    <script>
        // 公告弹窗控制函数
        function showAnnouncement() {
            const overlay = document.getElementById('announcement-overlay');
            const contentDiv = document.getElementById('announcement-content');
            const modal = document.querySelector('.announcement-modal');
            
            // 先清空旧内容
            contentDiv.innerHTML = '<div style="text-align: center; padding: 30px;"><i class="fas fa-spinner fa-spin"></i> 正在加载公告...</div>';
            
            // 显示弹窗
            overlay.style.display = 'flex';
            setTimeout(() => {
                overlay.style.opacity = '1';
                modal.style.transform = 'scale(1)';
            }, 10);
            
            // 异步获取公告内容
            fetch('gg.txt')
                .then(response => {
                    if (!response.ok) throw new Error('公告加载失败: ' + response.status);
                    return response.text();
                })
                .then(text => {
                    // 安全处理：转换换行符
                    const safeText = text.replace(/\n/g, '<br>');
                    contentDiv.innerHTML = safeText;
                })
                .catch(error => {
                    contentDiv.innerHTML = '<p style="color: #e74c3c; text-align: center;">' + error.message + '</p>';
                });
        }

        function closeAnnouncement() {
            const overlay = document.getElementById('announcement-overlay');
            const modal = document.querySelector('.announcement-modal');
            
            overlay.style.opacity = '0';
            modal.style.transform = 'scale(0.95)';
            
            setTimeout(() => {
                overlay.style.display = 'none';
            }, 400);
        }
        
        // 页面切换函数
        function togglePage(page) {
            const chatList = document.querySelector('.chat-list');
            const menuPage = document.querySelector('.menu-page');
            const navBtns = document.querySelectorAll('.nav-btn');
            
            if (page === 'menu') {
                chatList.style.display = 'none';
                menuPage.classList.add('active');
                
                // 更新导航按钮状态
                navBtns[0].classList.remove('active');
                navBtns[1].classList.add('active');
                navBtns[2].classList.remove('active');
            } else {
                chatList.style.display = 'block';
                menuPage.classList.remove('active');
                
                // 更新导航按钮状态
                navBtns[0].classList.add('active');
                navBtns[1].classList.remove('active');
                navBtns[2].classList.remove('active');
            }
        }
// 定时检测新好友请求（每30秒）
setInterval(() => {
    fetch('check_friend_requests.php')
        .then(response => response.json())
        .then(data => {
            if (data.count > 0) {
                // 更新红点
                const badge = document.querySelector('.friend-request-btn .notification-badge');
                if (badge) {
                    badge.textContent = data.count;
                } else {
                    const newBadge = document.createElement('span');
                    newBadge.className = 'notification-badge';
                    newBadge.textContent = data.count;
                    document.querySelector('.friend-request-btn').appendChild(newBadge);
                }
                
                // 添加动画效果
                document.querySelector('.friend-request-btn').classList.add('has-requests');
            } else {
                // 移除红点
                const badge = document.querySelector('.friend-request-btn .notification-badge');
                if (badge) badge.remove();
                
                // 移除动画效果
                document.querySelector('.friend-request-btn').classList.remove('has-requests');
            }
        });
}, 10000); // 30秒检测一次

        // 添加卡片悬停效果
        document.querySelectorAll('.chat-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-3px)';
                card.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.15)';
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0)';
                card.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.1)';
            });
        });
// 添加在现有JS脚本的末尾
let friendStatuses = {};

// 记录所有好友的初始状态
document.querySelectorAll('.chat-card').forEach(card => {
    if (card.dataset.chatId) {
        const friendId = card.dataset.chatId;
        const onlineDot = card.querySelector('.online-dot');
        
        if (onlineDot) {
            friendStatuses[friendId] = {
                lastStatus: onlineDot.classList.contains('online'),
                name: card.querySelector('.chat-info h3').textContent
            };
        }
    }
});

// 检查状态变化
function checkStatusChanges() {
    document.querySelectorAll('.chat-card').forEach(card => {
        if (card.dataset.chatId) {
            const friendId = card.dataset.chatId;
            const onlineDot = card.querySelector('.online-dot');
            
            if (onlineDot && friendStatuses[friendId]) {
                const isOnline = onlineDot.classList.contains('online');
                
                // 检测状态变化
                if (friendStatuses[friendId].lastStatus !== isOnline) {
                    // 显示通知
                    showStatusNotification(
                        friendStatuses[friendId].name, 
                        isOnline
                    );
                    
                    // 更新状态
                    friendStatuses[friendId].lastStatus = isOnline;
                    
                    // 添加更新动画
                    card.classList.add('status-updated');
                    setTimeout(() => card.classList.remove('status-updated'), 1500);
                }
            }
        }
    });
}

// 显示通知
function showStatusNotification(name, isOnline) {
    const notification = document.getElementById('statusNotification');
    const dot = document.getElementById('statusNotificationDot');
    const nameElement = document.getElementById('statusFriendName');
    const messageElement = document.getElementById('statusMessage');
    
    // 更新内容
    nameElement.textContent = name;
    messageElement.textContent = isOnline ? '现在上线了' : '刚刚离线了';
    
    // 更新圆点状态
    dot.className = 'status-dot ' + (isOnline ? 'online' : 'offline');
    
    // 显示通知
    notification.classList.add('show');
    
    // 3秒后隐藏
    setTimeout(() => {
        notification.classList.remove('show');
    }, 3000);
}

// 每10秒检查一次状态变化
setInterval(checkStatusChanges, 1000);
setInterval(() => location.reload(), 30000);
    </script>
</body>
</html>